<template>
  <div>
    <div class="c-pt20 c-pb48" v-if="!isDetail">
      <div v-for="(item,index) in feedbackList" :key="index" @click="lookDetail(item)" :class="index < feedbackList.length -1 ? 'c-bd-b1-mgray' : ''"
        class="c-ph24 c-pv30 c-flex-row c-justify-sb c-aligni-center">
        <div class="c-w0 c-flex-grow1">
          <p class="c-fs30 c-fc-xblack c-text-ellipsis1 c-mb20">{{item.content}}</p>
          <p class="c-fs24 c-text-ellipsis1" :class="isNoAnswer(item) ? 'theme-fc' : 'c-fc-gray'">{{isNoAnswer(item) ? '待回答' : item.contentAnswer}}</p>
        </div>
        <span><i class="iconfont c-fs22">&#xe908;</i></span>
      </div>
    </div>
    <!-- 显示反馈详情 -->
    <div v-else class="c-pv50 c-ph24">
      <p class="c-mb30 c-fs32 c-fc-xblack c-fw-b">{{detailData.content}}</p>
      <div class="c-fs28 c-fc-xblack c-lh48">{{detailData.contentAnswer}}</div>
    </div>
    <loading-status-tem :noData="noneShow" :noDataText="'未查到反馈记录哦~'"></loading-status-tem>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
export default {
  name: 'FeedbackList',
  components: {loadingStatusTem},
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      feedbackList: [],
      noneShow: false,
      idDetail: false, // 是否是详情
      detailData: {} // 详情数据
    }
  },
  computed: {
    isNoAnswer() {
      return function (data) {
        return data.answerStatus == 0
      }
    }
  },
  methods: {
    // 获取列表
    getList() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      var $this = this;
      utilJs.getMethod(`${global.apiurl}feedback/getFeedbackList`, res => {
        $this.loading = false;
        $this.feedbackList = res || []
        $this.noneShow = $this.feedbackList.length <= 0
      }, () => {
        $this.loading = false;
      })
    },
    // 点击查看详情
    lookDetail(item) {
      this.isDetail = true;
      this.$forceUpdate()
      setDocumentTitle("详情");// eslint-disable-line
      this.detailData = item
    },
    //分享
    wechatShare: function () {
      let title = '意见反馈' || window.localStorage.getItem("shareTitle");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(
        shareUrl,
        title,
        "",
        "",
        function () { },
        true
      );
    },
    //手机端分享
    appShare() {
      let title = '意见反馈' || window.localStorage.getItem("shareTitle");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue(title, "", shareUrl, "");
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.isDetail) { // 如果是详情，就返回列表
      this.isDetail = false;
      this.detailData = {};
      history.pushState(null, null, `${window.location.href.split("#")[0]}#${from.fullPath}`);
    } else {
      next()
    }
  },
  activated() {
    setDocumentTitle("历史反馈");// eslint-disable-line
    this.isDetail = false;
    this.detailData = {};
    this.feedbackList = [];
    this.getList()
  }
}
</script>
<style scoped>

</style>